<!--
 * @Author: Bobby
 * @Date: 2021-12-30 10:01:42
 * @LastEditTime: 2023-11-01 15:57:48
 * @LastEditors: 甯左龙 1173405584@qq.com
 * @Description:
 * @FilePath: \wms-v2\src\ve\elements\form\uiCheckbox\uiCheckbox.vue
 * CIMC-V2
-->
<template>
  <UiFormItem :class="{ hidden: conditionProperty.hidden || info.extension.hidden.value }" :info="info">
    <el-checkbox-group
      :ref="info._id"
      v-model="formDataModel"
      v-ui-ref="vSetRef"
      :disabled="conditionProperty.disabled || info.extension.disabled.value"
      @change="handleChange"
      @keyup.enter="$handleEnter"
    >
      <template v-if="hasApi">
        <el-checkbox
          v-for="v in optionList"
          :key="`${v[info.extension.valueField.value]}_${postfixKey}`"
          :label="v[info.extension.valueField.value]"
          :name="info._id"
        >
          {{ v[info.extension.labelField.value] }}
        </el-checkbox>
      </template>
      <template v-else>
        <el-checkbox v-for="(v, i) in getJsonList" :key="i" :label="v.value" :name="info._id">
          {{ v.label }}
        </el-checkbox>
      </template>
    </el-checkbox-group>
  </UiFormItem>
</template>
<script>
  import { defineComponent } from 'vue'
  import { UiMixin, ElementsFormMixin, RefsInjectMixin, ConditionMixin } from '@ve/mixin'
  import request from '@/utils/request'
  import { GFCD } from '@/utils/utils'
  import isEmpty from 'lodash/isEmpty'
  import merge from 'lodash/merge'
  import trim from 'lodash/trim'
  import isArray from 'lodash/isArray'
  import { processingConstant, replaseRegVariable } from '@ve/utils/utils'

  export default defineComponent({
    name: 'UiCheckbox',
    components: {},
    mixins: [UiMixin, ElementsFormMixin, RefsInjectMixin, ConditionMixin],
    data() {
      return {
        optionList: [],
        postfixKey: 'aa',
      }
    },
    computed: {
      getJsonList() {
        return this.info.extension.jsonList.value
      },
      hasApi() {
        return this.info.extension.api && this.info.extension.api.value
      },
    },
    created() {},
    mounted() {},
    methods: {
      handleChange() {
        // 触发条件判断值改变
        this.setPageModulesState('value', this.formDataModel)
        // 调用 change 事件
        this.onChange()
      },
      requestOptionList(cb) {
        if (!this.hasApi) {
          cb && cb({})
          return
        }
        let requestDataObj = {}
        isArray(this.info.extension.requestData.value) &&
          this.info.extension.requestData.value.forEach((item) => {
            let itemVal = item.value
            if (/#{.*?}/g.test(item.value)) {
              itemVal = replaseRegVariable(itemVal, this.info.data.formData)
            }
            requestDataObj[item.key] = processingConstant(this, itemVal)
          })
        let options = {
          api: this.info.extension.api.value,
          method: this.info.extension.method.value,
          getDataKey: this.info.extension.getDataKey.value,
          data: merge(requestDataObj, this.info.data.formData),
        }
        if (!trim(options.api)) return
        this.request(options, cb)
      },
      request(options = {}, cb = null) {
        this.loading = true
        let getDataKey = options.getDataKey
        //发起请求
        return request({
          url: GFCD('dams', 'domain') + options.api,
          method: 'post',
          data: {
            data: JSON.stringify(options.data),
            method: options.method,
          },
        }).then((res) => {
          this.loading = false
          //解密
          let optionList = isEmpty(getDataKey) ? res.data.data || [] : res.data[getDataKey].data || []
          if (isArray(optionList)) {
            this.optionList = optionList
          } else {
            this.optionList = []
          }
          this.postfixKey = this.componentId()
          // 进行回调
          cb && cb(res)
        })
      },
      componentId() {
        const nanoid = customAlphabet('abcdefghijklmnopqrstuvwsyzABCDEFGHIJKLMN', 6)
        return nanoid()
      },
    },
  })
</script>
<style lang="scss" scoped></style>
